import Roact from '@rbxts/roact';
import BaseComponent from 'shared/component/dlt-view/BaseComponent';
import { CSS } from 'shared/component/dlt-view/CssCommon';
import Mouter from 'shared/component/dlt-view/Mouter';
import EventBinder from 'shared/component/event/EventBinder';
import Log4R from 'shared/component/log/Log4R';
const loginfo = Log4R.getLog('info');
export interface StartViewProps {
    name?: StringValue
    mounter?: Mouter
    startButton: Roact.Ref<TextButton>
    shartButtonEventBind: EventBinder<() => void>;
}
export class StartView extends Roact.Component<StartViewProps> {
    binder?: BaseComponent<StartViewProps>

    protected willUnmount(): void {
        this.binder?.willUnmount();
    }
    didMount() {
        this.binder = new BaseComponent<StartViewProps>()
        this.binder.bind(['name'], this.props, () => this.setState(this.props));
        // loginfo?.info('this.binder', this.binder)

    }
    public render(): Roact.Element | undefined {

        const children = new Array<Roact.Element>();
        this.props[Roact.Children]?.forEach(c => {
            children.push(c)
        })
        const t = new CSS(undefined, undefined, ['StartView']);
        const s = (name: string) => t.cssEx(name);
        const r = <Roact.Fragment>
            <frame {...s('root')} Key={'root'}>
                <frame {...s('yy')} Key={'yy'}>
                    <frame {...s('xy')} Key={'xy'}>
                        <textbutton Ref={this.props.startButton} {...s('START')} Key={'START'} Visible={false}
                            Event={
                                {
                                    Activated: () => {
                                        this.props.shartButtonEventBind.callBack();
                                        this.props.mounter?.unMount();

                                    }
                                }
                            }
                        >
                        </textbutton>
                        <textlabel {...s('TextLabel')} Key={'TextLabel'}>
                            <uigradient {...s('UIGradient')} Key={'UIGradient'}>
                            </uigradient>
                        </textlabel>
                    </frame>
                </frame>
                <uilistlayout {...s('UIListLayout')} Key={'UIListLayout'}>
                </uilistlayout>
            </frame>
        </Roact.Fragment>;
        return r
    }

}